import { mapState, mapActions } from 'vuex'
import { CommentService } from '../../../services'
import LocalCache from '../../../utils/localCache'
import moment from 'moment'
import getDeepTreeData from '../../../utils/getDeepTreeData'
import CommentCell from '../CommentCell.vue'
import debounce from '../../../utils/debounce'
// import 'vue-hljs/dist/style.css'
export default {
  components: {
    CommentCell
  },
  provide() {
    return {
      callBackComment: this.callBackComment
    }
  },
  data() {
    return {
      cloneArticleContent: {},
      cloneCommentList: [],
      treeData: [],
      myComment: '',
      loading: false,
      finished: true,
      isLogin: false,
      isComment2Comment: false,
      showPopover: false,
      CommentTargetId: -1,
      CommentTargetName: '',
      momentId: this.$route.params.id
    }
  },
  async created() {
    this.isLogin = !!LocalCache.getLocalCache('miBlogToken')
    await this.GetArticleContent(this.momentId)
    await this.getMomentCommentList({ momentId: this.momentId })
    this.cloneArticleContent = this.articleContent
    // this.cloneCommentList = this.commentList
    this.treeData = getDeepTreeData(this.commentList, this.commentList, true)
    console.log(this.treeData)
  },
  methods: {
    ...mapActions('ArticleContent', [
      'GetArticleContent',
      'getMomentCommentList'
    ]),
    calcDate(date) {
      moment.locale('zh-cn')
      return moment(date).fromNow()
    },
    // 获取评论
    async goSendComment() {
      const res = await CommentService.publishedComment({
        content: this.myComment,
        momentId: this.momentId
      })
      if (res.status === 200) {
        await this.getMomentCommentList({ momentId: this.momentId })
        this.treeData = getDeepTreeData(
          this.commentList,
          this.commentList,
          true
        )
        this.cloneArticleContent.commentCount++
      }
    },
    closeC2CPanel() {
      this.isComment2Comment = false
    },
    // 前往登录界面
    goLogin() {
      this.$router.push('/login')
    },
    // 回复评论
    callBackComment(item) {
      this.isComment2Comment = true
      this.CommentTargetId = item.id
      this.CommentTargetName = item.name
    },
    comment2Comment: debounce(async function() {
      const res = await CommentService.comment2comment(this.CommentTargetId, {
        momentId: this.momentId,
        content: this.myComment
      })
      if (res.status === 200) {
        await this.getMomentCommentList({ momentId: this.momentId })
        this.treeData = getDeepTreeData(
          this.commentList,
          this.commentList,
          true
        )
        this.cloneArticleContent.commentCount++
        this.myComment = ''
      }
    })
  },
  computed: {
    ...mapState('ArticleContent', ['articleContent', 'commentList'])
  }
}
